<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
    组件的注册：
      全局注册
        Vue3: 
          app.component()
        Vue2:
          Vue.component()
      局部注册
        通过配置组件的 components 选项来注册

    全局注册与局部注册的区别：
      全局注册的组件，在当成Vue应用中任何组件内都可以直接使用。
      局部注册的组件，在谁身上注册的就只能在它身上使用。

    推荐使用局部组件，为什么？？
      
   -->

    <div id="app">
      <my-hello></my-hello>

      <hr />

      <my-world></my-world>
    </div>

    <script src="../lib/vue-3.js"></script>
    <script>
      // const msg = "hello";
      // 定义一个 Button
      const Button = {
        template: `
          <button>按钮</button>
        `,
      };

      // 定义一个 Hello
      const Hello = {
        template: `
          <div>
            Hello
            <my-button></my-button>
          </div>
        `,

        // 通过 components 配置项，注册我的局部组件
        components: {
          // key: value
          // key - 组件的名字，类似 app.component() 的第一个参数
          // value - 组件的实现，类似 app.component() 的第二个参数
          "my-button": Button,
        },
      };

      // 定义一个 World
      const World = {
        template: `
          <div>
            World  
            <my-button></my-button>
          </div>
        `,
      };

      const app = Vue.createApp({});

      // 将 Button 组件注册成全局组件
      // app.component("my-button", Button);

      app.component("my-hello", Hello);

      app.component("my-world", World);

      app.mount("#app");
    </script>
  </body>
</html>
